<template>
  <a-layout style="height: 100vh">
    <a-layout-header>
      <icon-arrow-left
        @click="goBack"
        size="50"
        style="position: fixed; top: 3vw; left: 3vw; z-index: 999; color: black"
      />
      <h1 style="margin-top: 8vh; font-size: 10vw; text-align: center">
        {{ chapterlist.title }}
      </h1>
    </a-layout-header>
    <a-layout-content>
      <div class="content-center">
        <a-image width="400" :src="chapterlist.avatar" />
        <h1 style="font-size: 15vw">{{ formattedDuration }}</h1>
      </div>
    </a-layout-content>
    <a-layout-footer>
      <div class="frame-main">
        <div class="main-bottom">
          <icon-apps size="40" />
          <a-button
            :disabled="current === 1"
            @click="onPrev"
            :style="{ backgroundColor: 'rgba(225, 225, 225, 0.5)', borderRadius: '50%' }"
          >
            <icon-backward size="40" :style="{ color: 'black' }" />
          </a-button>
          <icon-pause-circle-fill
            size="185"
            :style="{ color: 'blue', borderRadius: '50%' }"
            @click="togglePlayPause"
            v-show="flag"
          />
          <icon-play-circle-fill
            size="185"
            :style="{ color: 'blue', borderRadius: '50%' }"
            @click="togglePlayPause"
            v-show="!flag"
          />
          <a-button
            :disabled="current === 3"
            @click="onNext"
            :style="{ backgroundColor: 'rgba(225, 225, 225, 0.5)', borderRadius: '50%' }"
          >
            <icon-forward size="40" :style="{ color: 'black' }" />
          </a-button>
          <icon-sound-fill size="40" @click="flag2 = !flag2" v-show="flag2" />
          <icon-mute-fill size="40" @click="flag2 = !flag2" v-show="!flag2" />
        </div>
      </div>
    </a-layout-footer>
  </a-layout>
</template>
<script setup>
import { useRoute } from 'vue-router'
import { ref, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const route = useRoute()
const chapterlist = ref({})

onMounted(() => {
  if (route.params.chapterlist) {
    chapterlist.value = JSON.parse(route.params.chapterlist)
  }
})

console.log(chapterlist)

const goBack = () => {
  router.go(-1)
}

const current = ref(1)
const flag = ref(true) // 视频开始暂停控制
const flag2 = ref(true) // 声音播放控制

const onPrev = () => {
  current.value = Math.max(1, current.value - 1)
}

const onNext = () => {
  current.value = Math.min(3, current.value + 1)
}

// 倒计时相关逻辑
const duration = ref(chapterlist.value.duration * 60) // 将分钟转换为秒
const intervalId = ref(null)

const formattedDuration = computed(() => {
  const minutes = Math.floor(duration.value / 60)
  const seconds = duration.value % 60
  return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
})

const startTimer = () => {
  intervalId.value = setInterval(() => {
    if (duration.value > 0) {
      duration.value -= 1
    } else {
      stopTimer()
    }
  }, 1000)
}

const stopTimer = () => {
  clearInterval(intervalId.value)
  intervalId.value = null
}

const togglePlayPause = () => {
  flag.value = !flag.value
  if (flag.value) {
    startTimer()
  } else {
    stopTimer()
  }
}

watch(chapterlist, (newVal) => {
  duration.value = newVal.duration * 60
  if (flag.value) {
    startTimer()
  }
})
</script>
<style lang="scss" scoped>
.frame-main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.main-bottom .icon-pause-circle-fill,
.main-bottom .icon-play-circle-fill {
  cursor: pointer;
}

.main-bottom .icon-sound-fill,
.main-bottom .icon-mute-fill {
  cursor: pointer;
}

.layout-demo :deep(.arco-layout-header) {
  height: 15vh;
  background-color: var(--color-primary-light-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-demo :deep(.arco-layout-footer) {
  height: 25vh;
  background-color: var(--color-primary-light-4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-demo :deep(.arco-layout-content) {
  height: 60vh;
  background-color: rgb(var(--arcoblue-6));
  display: flex;
  align-items: center;
  justify-content: center;
}

.content-center {
  text-align: center;
}
</style>
